<script lang="ts">
    import { Alert, Button, Input, Select } from "flowbite-svelte";
    import { CloseOutline, InfoCircleSolid } from 'flowbite-svelte-icons';

    import { fade, fly, draw } from 'svelte/transition';

    import { angle1, angle2, intervalId, demo_state, motionmodeListgroupItemtext } from '$lib/data';
    import { demo_load_collection_mo1, demo_load_collection_mo2 } from "$lib/momodecom";


    import Canvas from "./canvas.svelte";
    import Rpm from "./motor.svelte";
    import State from "./state.svelte"
    import Test from "./test.svelte";
    import Stm32 from "./stm32.svelte";

    // let intervalId:number;
    // let demo_state:boolean = $state(false);

    let clickmy_state:boolean = $state(false);
    let clickmy_Alert:boolean = $state(false);
    let clickmy_over_once:boolean = false;

    let te_value = $state("");
    
    interface Serial_select_type {
        value: string;
        name: string;
    };
    let Serial_select_value: Serial_select_type[] = $state([]);
    function update_Serial_select() {
        Serial_select_value = [];
        $motionmodeListgroupItemtext.forEach((item, index) => {
            console.log(item)
            Serial_select_value.push({value: index+"_"+item, name: item});
        });
    }

    function clickmy() {
        if($demo_state == false){
            $demo_state = true;

            $intervalId = setInterval(() => {
                $angle1 = Math.random()*0.8;
                $angle2 = Math.random()*1.2;
            }, 500);
        }
        if($demo_state == true && clickmy_over_once == true){
            if(clickmy_state == false){
                clickmy_state = true;
                clickmy_Alert = true;
                setTimeout(() => {clickmy_Alert = false; clickmy_state = false;},1500)
            }
        }
        clickmy_over_once = true;
    };
    function closemy() {
        $demo_state = false;
        clickmy_state = false;
        clickmy_Alert = false;
        clickmy_over_once = false;
        clearInterval($intervalId);
    };

    function myrandom(){

    }
</script>

{#if clickmy_Alert}
<div class="fixed z-[90]" in:fly={{ x: 2000, duration: 500 }} out:fly={{ x: -200, duration: 200 }}>
    <Alert color="red">
        <div class="flex">
        <InfoCircleSolid />
        <span class="mx-2">请勿多次点击</span>
        </div>
    </Alert>
</div>
{/if}

<div>
    <div class="absolute">
        <Button onclick={() => {clickmy()}}>演示</Button>
        <Button onclick={() => {closemy()}}>停止</Button>
    </div>
    <div class="absolute grid-cols-2 gap-3 translate-y-[4rem]">
        <Select items={Serial_select_value} bind:value={te_value} onclick = {() => {update_Serial_select()}}></Select>
        <div class="my-2">
            <Button onclick={() => {demo_load_collection_mo1(te_value)}}>
                mo1
            </Button>
            <Button onclick={() => {demo_load_collection_mo2(te_value)}}>
                mo2
            </Button>
        </div>
    </div>
    <div class="flex">
        <div>
            <Canvas></Canvas>
            <State></State>
        </div>
        <div>
            <Rpm></Rpm>
        </div>
        <div>
            <Stm32></Stm32>
        </div>
    </div>
    <!-- <Test></Test> -->
</div>
